<template>
    <v-app id="inspire">
        <v-content>
            <v-container class="fill-height">
                <v-row justify="center">
                    <v-col cols="12" sm="8" md="4">
                        <v-card-title>
                            <div class="avatar">
                                <img src="../assets/minilogo.png" />
                            </div>
                        </v-card-title>
                        <v-card color="white" class="align-item-center">
                            <v-toolbar color="dark">
                                <img class="login-center" src="../assets/logo.png" />
                            </v-toolbar>

                            <v-card-text>
                                <v-expand-transition>
                                    <WxLogin class="login-center" v-if="isShow" :redirectUri="redirectUri" :appId="appId"></WxLogin>
                                </v-expand-transition>

                                <v-expand-transition>
                                    <div v-if="!isShow" class="advertisement login-center">
                                        <img src="../assets/logo.png" />
                                    </div>
                                </v-expand-transition>
                            </v-card-text>
                            <v-card-actions>
                                <v-btn color="primary" class="btn-wechat" @click="toHome">微信登录</v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-col>
                </v-row>
            </v-container>
        </v-content>
    </v-app>
</template>

<script lang='ts'>
import { Vue, Prop, Component, Watch } from 'vue-property-decorator';
import WxLogin from '@/components/wechatLogin/index';
import { Route } from 'vue-router';
import { Dictionary } from 'vuex';
import NProgress from 'nprogress'; // 页面加载进度条
import { setToken, getCode, setCode } from '@/utils/cookies';
import { UserModule } from '@/store/modules/user';

@Component({
    components: {
        WxLogin,
    },
})
export default class Login extends Vue {
    private redirect?: string;
    private redirectUri: string = '';
    private appId: string = '';
    private code: string = '';
    private otherQuery: Dictionary<string> = {};
    private isShow: boolean = false;

    private drawer: any = null;

    @Prop({
        type: String,
        default: '',
    })
    private source!: string;

    @Watch('$route', { immediate: true })
    private async onRouteChange(route: Route) {
        // NProgress.start();
        console.log('dd');

        const query = route.query as Dictionary<string>;
        if (query) {
            this.redirect = query.redirect;
            this.otherQuery = this.getOtherQuery(query);
        }
        // this.code = this.GetQueryString('code'); // 存在bug，需要将code存入缓存
        // if (this.code) {
        //     setCode(this.code);
        // }
        this.handleLogin();
    }

    private async handleLogin() {
        console.log(this.code);
        await UserModule.Login(); // 登录写入token
        this.$router.push({
            path: this.redirect || '/',
            query: this.otherQuery,
        });
        // if (this.code) {
        //     await UserModule.Login(); // 登录写入token
        //     this.$router.push({
        //         path: this.redirect || '/',
        //         query: this.otherQuery,
        //     });
        // } else if (getCode()) {
        //     await UserModule.Login(); // 登录写入token
        //     this.$router.push({
        //         path: this.redirect || '/',
        //         query: this.otherQuery,
        //     });
        // }
    }

    private getOtherQuery(query: Dictionary<string>) {
        return Object.keys(query).reduce(
            (acc, cur) => {
                if (cur !== 'redirect') {
                    acc[cur] = query[cur];
                }
                return acc;
            },
            {} as Dictionary<string>,
        );
    }
    private GetQueryString(name: string) {
        const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        let r = window.location.search.substr(1).match(reg); // 获取url中"?"符后的字符串并正则匹配
        let context = '';
        if (r != null) {
            context = r[2];
        } else {
            //   (reg as any) = null;
            r = null;
        }

        return context === null || context === '' || context === 'undefined' ? '' : context;
    }

    private created() {
        this.$vuetify.theme.dark = true;
    }

    private toHome() {
        this.isShow = !this.isShow;
        const host = window.location.href;
        this.redirectUri = encodeURI(host);
        this.appId = 'wx51bbcc3f78f88ccf';
    }
}
</script>

<style  scoped>
#title {
    margin-left: calc(50% - 50px);
}
.avatar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 45px;
    border: 1px solid rgb(59, 135, 235);
    width: 80px;
    height: 80px;
    margin-left: calc(50% - 40px);
    margin-top: -120px;
}
.login {
    width: 200px;
    margin-left: calc(50% - 100px);
    margin-top: 60px;
}
.advertisement {
    height: 450px;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.btn-wechat {
    margin-left: calc(50% - 50px);
}
.login-center {
    margin-left: calc(50% - 155px);
}
</style>